<template>
  <div>
    <Breadcrumb :items="['menu.system', '按钮配置']" />
    <div>
      <a-spin :loading="pageLoading?.loading" style="width: 100%">
        <CardConponents>
          <a-button type="primary" @click="handleClick">新增</a-button>
        </CardConponents>
        <CardConponents>
          <a-table :data="dataList?.list">
            <template #columns>
              <a-table-column title="id" data-index="id"></a-table-column>
              <a-table-column title="标题" data-index="title"></a-table-column>
              <a-table-column title="类型" data-index="type">
                <template #cell="{ record }">
                  {{ showTypeAndStatus('type', record) }}
                </template>

              </a-table-column>
              <!-- <a-table-column title="备注" data-index="remark"></a-table-column> -->
              <a-table-column title="状态" data-index="status">
                <template #cell="{ record }">
                  {{ showTypeAndStatus('status', record) }}
                </template>
              </a-table-column>
              <a-table-column title="排序" data-index="sort"></a-table-column>
              <a-table-column title="创建时间" data-index="create_time">
                <template #cell="{ record }">
                  {{ record.create_time ? getTime(Number(record?.create_time)) : '' }}
                </template>
              </a-table-column>
              <a-table-column title="图片" data-index="img"></a-table-column>
              <a-table-column title="操作">
                <template #cell="{ record }">
                  <a-button type="primary" size="small" @click="handleEdidClick(record)">编辑</a-button>
                  <a-popconfirm content="确定要删除吗?" type="error" @ok=handleDelClick(record)>
                    <a-button type="primary" status="danger" size="small">删除</a-button>
                  </a-popconfirm>
                </template>
              </a-table-column>
            </template>
          </a-table>

        </CardConponents>
        <a-modal :maskClosable=false v-model:visible="visible" :title="form.Id>0?'新增':'编辑'" :footer="false">
          <a-form :model="form" @submit="handleSubmit">
            <a-form-item field="Title" label="标题" >
              <a-input v-model="form.Title" />
            </a-form-item>
            <a-form-item field="Type" label="选择类型">
              <a-select :style="{ width: '320px' }" v-model="form.Type" placeholder="请选择 ...">
                <a-option :value="1">法律服务机构</a-option>
                <a-option :value="2">法律法规</a-option>
                <a-option :value="3">案例查询</a-option>
                <a-option :value="4">视频宣传</a-option>
                <a-option :value="5">律师事务所</a-option>
                <a-option :value="6">法律服务所</a-option>
                <a-option :value="7">公证处</a-option>
                <a-option :value="8">司法鉴定所</a-option>
                <a-option :value="9">法律援助中心</a-option>
                <a-option :value="10">人民调解委员会</a-option>
                <a-option :value="11">公共服务中心</a-option>
                <a-option :value="12">收费查询</a-option>
              </a-select>
            </a-form-item>
            <a-form-item field="StatusEd" label="状态">
              <a-switch :default-checked="form.StatusEd" v-model="form.StatusEd" />
            </a-form-item>
            <a-form-item field="img" label="图片" >
              <UploadImg :headimg="form?.Img" :parentInfo="fileUpload" :changeForm="changeForm" :type="'img'" />
            </a-form-item>
            <a-form-item field="Sort" label="排序" >
              <a-input v-model="form.Sort" />
            </a-form-item>
            <div class="btn">
              <a-button style="width: 100px;margin-right: 10px;" @click="cancelClick">
                取消
              </a-button>
              <a-button style="width: 100px;" type="primary" html-type="submit" long :loading="loading">
                提交
              </a-button>
            </div>
          </a-form>
        </a-modal>
      </a-spin>
    </div>
  </div>
</template>


<script lang="ts" setup>
import CardConponents from '@/components/card/index.vue';
import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import UploadImg from '@/components/uploadImg/index.vue';
import { fileUpload } from '@/api/system'
import { buttonList,add,edit,del } from '@/api/button';//获取列表
import { getTime } from '@/utils/auth'
const pageLoading: any = reactive({ loading: false });


const form:any = reactive({
  Title: '',
  Img: '',
  Type: '',
  Remark: '',
  StatusEd: '',
  ParentId:'',
  Sort:'',
  Id: '',
});
const visible = ref(false);
const cancelClick = () => {
  visible.value = false;
  form.Title = ''
  form.Img = ''
  form.Type = ''
  form.Remark = ''
  form.StatusEd = ''
  form.ParentId=''
  form.Sort=''
  form.Id = ''
}
//新增弹框
const handleClick = () => {
  visible.value = true;
  form.Title = ""
  form.Img = ""
  form.Remark = ""
  form.Type = ""
  form.Id = ""
  form.StatusEd = ""
  form.Sort = ""
};

const changeForm = (val: any) => {
  form.Img = val
}

const showTypeAndStatus = (type: any, value: any) => {
  if (type == 'type') {
    var str;
    switch (value.type) {
      case 1:
      str = "法律服务机构"
        break;
      case 2:
      str = "法律法规"
        break;
      case 3:
      str = "案例查询"
        break;
      case 4:
      str = "视频宣传"
        break;
      case 5:
      str = "律师事务所"
      break;
      case 6:
      str = "法律服务所"
      break;
      case 7:
      str = "公证处"
      break;
      case 8:
      str = "司法鉴定所"
      break;
      case 9:
      str = "法律援助中心"
      break;
      case 10:
      str = "调解委员会"
      break;
      case 11:
      str = "公共服务中心"
      break;
      case 12:
      str = "收费查询"
      break;
      default:
        str = ''
    }

    return str;
  }
  else {
    return value.status === 1 ? '正常' : '禁止'
  }
}

const { loading, setLoading } = useLoading();

onMounted(() => {
  getList()
});

//数据
const dataList: any = reactive({
  list: [],
  total: 0
});

//请求
const getList = async () => {
  pageLoading.loading = true
  const res = await buttonList({ data: { Offset: 0, Limit: 100 } })
  pageLoading.loading = false
  dataList.list = res?.data?.List
  dataList.total = res?.data?.Total
}

//新增、编辑
const handleSubmit = async ({ errors, values }: any) => {
  if (loading.value) return;
  if (!errors) {

    if (values.StatusEd == "true" || values.StatusEd == true) {
      values.Status = 1
    } else {
      values.Status = 0
    }
    
    try {
      setLoading(true);
      
      if (form.Id > 0){
        
        const res: any = await edit(values);
        Message.success(res?.msg);
        setLoading(false);
        
        if (res?.code == 1) {
          visible.value = false;
          getList()
        }
      }else{
        const res: any = await add(values);
        Message.success(res?.msg);
        setLoading(false);
      
        if (res?.code == 1) {
          visible.value = false;
          getList()
        }
      }
     
    } catch (error) {
      setLoading(false);
    }
  }
};


const handleEdidClick = ( value: any)=>{
  visible.value = true;
  form.Title = value.title
  form.Img = value.img
  form.Remark = value.remark
  form.Type = value.type
  form.Id = value.id
  form.Sort=value.sort
  form.StatusEd = value.status==1?true:false;
}

// 删除
const handleDelClick = async (value: any) => {
  const res: any = await del({ Id: value?.id });
  if (res?.code === 1) {
    Message.success('删除成功')
    getList()
  }
}
</script>

<script lang="ts">
export default {
  name: 'Button',
};
</script>

<style lang="less" scoped>
.btn {
  display: flex;
  justify-content: flex-end;
}
</style>
